<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";

import { ElLoading } from "element-plus";
import { Close, Minus, Setting, Sunny, Moon } from "@element-plus/icons-vue";

import BaseData from "./views/BaseData/Index.vue";
import DataTable from "./views/DataTable/Index.vue";
import { useSystemStoreHook } from "@renderer/store/modules/system";
import iconImage from "./assets/icon.svg";

const newVersion = ref("");
const hasNewVersion = ref(false);
const newVersionDownloaded = ref(false);
const settingPageVisible = ref(false);
const winSizeSelection = ref("normal");
const tipsCheckUpdate = ref(false);

let fullLoading;

const projectName = import.meta.env.RENDERER_VITE_PROJECT_NAME;

function toSetting() {
  settingPageVisible.value = true;
}

// 是否开机自启动
const autoOpen = ref(true);
async function autoOpenChange(val) {
  await window.api.setAutoOpen(val);
}

async function winSizeChange(selection) {
  await window.api.resize(selection);
  await window.api.setStore("screenSize", selection);
}

function updateNow() {
  window.api.updateNow();
}

async function toCheckUpdate() {
  fullLoading = ElLoading.service();
  tipsCheckUpdate.value = true;
  await window.api.checkUpdate();
  setTimeout(() => {
    if (fullLoading) {
      fullLoading.close();
      ElMessage.error("检查更新失败，请稍后重试！");
    }
  }, 10 * 1000);
}

function mini() {
  window.api.mini();
}

function close() {
  ElMessageBox.confirm("你确定要退出软件吗？", "提示", {
    confirmButtonText: "确 定",
    cancelButtonText: "取 消",
    type: "warning"
  })
    .then(() => window.api.close())
    .catch(() => {});
}

function toOpenSerial() {}

// 自动更新
const downloadInfo = reactive({
  total: 0.0,
  delta: 0.0,
  transferred: 0.0,
  percent: 0.0,
  mbPerSecond: 0.0
});

async function autoCheckUpdate() {
  await window.api.checkUpdate();
  setTimeout(
    async () => {
      await autoCheckUpdate();
    },
    30 * 60 * 1000
  );
}

onMounted(async () => {
  // await autoCheckUpdate();
});
</script>

<template>
  <div style="width: 100%; height: 100%">
    <div class="title">
      <div class="system-info">
        <div style="display: flex">
          <img class="icon" :src="iconImage" alt="" />
          <div class="client-name">{{ projectName }}</div>
        </div>
        <div class="welcome"></div>
      </div>
      <div class="overall-btn">
        <el-button text @click="toSetting">
          <el-icon>
            <el-badge :is-dot="hasNewVersion && newVersionDownloaded">
              <Setting />
            </el-badge>
          </el-icon>
        </el-button>
        <el-button text :icon="Minus" @click="mini" />
        <el-button type="danger" text :icon="Close" @click="close" />
      </div>
    </div>
    <div class="content">
      <div class="left-col">
        <BaseData />
      </div>
      <div class="right-col">
        <DataTable />
      </div>
    </div>
  </div>
  <el-dialog v-model="settingPageVisible" title="系统设置" top="7vh">
    <el-form size="large" label-width="78px" style="margin: 0 12px">
      <el-form-item label="主题">
        <el-switch
          v-model="useSystemStoreHook().isDark"
          width="56px"
          :active-action-icon="Moon"
          :inactive-action-icon="Sunny"
          style="
            --el-switch-on-color: var(--el-border-color);
            --el-switch-off-color: var(--el-border-color);
          "
        />
      </el-form-item>
      <el-form-item label="自启动">
        <el-switch v-model="autoOpen" width="56px" @change="autoOpenChange" />
      </el-form-item>
      <el-form-item label="分辨率">
        <el-select v-model="winSizeSelection" style="width: 100%" @change="winSizeChange">
          <el-option label="常规 (800 × 480)" value="normal" />
          <el-option label="中屏 (1200 × 720)" value="middle" />
          <el-option label="最大化" value="max" />
          <el-option label="全屏" value="full" />
        </el-select>
      </el-form-item>
      <el-form-item label="软件更新">
        <el-badge v-if="hasNewVersion && newVersionDownloaded" is-dot style="width: 100%">
          <el-button type="primary" style="width: 100%" @click="updateNow">
            新版本v{{ newVersion }} 点击开始更新</el-button
          >
        </el-badge>
        <span v-else-if="hasNewVersion" style="width: 100%; text-align: center"
          >新版本安装包下载中...</span
        >
        <el-button v-else plain style="width: 100%" @click="toCheckUpdate"> 检 查 更 新</el-button>
      </el-form-item>
      <el-form-item label="设备通讯">
        <el-button plain style="width: 100%" @click="toOpenSerial">点 击 设 置</el-button>
      </el-form-item>
      <el-progress
        v-if="hasNewVersion && !newVersionDownloaded"
        :text-inside="true"
        striped
        striped-flow
        :duration="10"
        :stroke-width="16"
        :percentage="downloadInfo.percent"
      />
      <p v-if="hasNewVersion && !newVersionDownloaded" class="download-info">
        {{ downloadInfo.transferred }}/{{ downloadInfo.total }}MB ({{
          downloadInfo.mbPerSecond
        }}MB/s)
      </p>
    </el-form>
  </el-dialog>
</template>

<style lang="scss">
html,
body,
#app {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
body {
  .el-err-msg {
    p {
      color: #f56c6c;
      font-size: 24px;
      line-height: 48px;
      margin-left: 96px;
    }
    .el-message-box__content {
      margin-top: 48px;
      margin-bottom: 48px;
    }
    .el-message-box__title > span {
      color: #f56c6c;
      font-size: 42px;
      line-height: 52px;
      margin: 0 0 0 12px;
    }
    .el-message-box__status {
      font-size: 110px !important;
    }
    .el-button {
      height: 56px !important;
      width: 120px !important;
      margin: 0 12px 12px 0;
    }
  }
}
.update-form {
  width: 100%;
  height: 100%;
  .title {
    height: 48px;
    width: 100%;
    display: flex;
    .el-button {
      margin-left: auto;
      width: 64px;
      font-size: 24px !important;
    }
  }
  .update-content {
    height: calc(100% - 48px);
    width: 100%;
    display: flex;
    flex-direction: column;
    .update-tips {
      margin: 12px;
      text-align: center;
    }
    .update-progress {
      margin: 12px 24px 12px 24px;
    }
  }
}
.system-info {
  line-height: 48px;
  width: calc(100% - 4 * 64px);
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: default;
  user-select: none;
  -webkit-app-region: drag;
  .icon {
    margin: 0 12px 0 16px;
  }
  .client-name {
    font-size: 16px;
    // color: #eeeeee;
    color: var(--el-text-color-primary);
    margin-right: 12px;
  }
  .welcome {
    margin-right: 12px;
  }
  .process {
    color: #409eff;
    font-size: 14px;
  }
}
.title {
  margin: 0;
  display: flex;
  justify-content: space-between;
}
.content {
  height: calc(100% - 48px);
  .left-col {
    display: inline-block;
    width: 50%;
    height: 100%;
    box-sizing: border-box;
    padding: 12px 12px 24px 24px;
  }
  .right-col {
    display: inline-block;
    width: 50%;
    height: 100%;
    box-sizing: border-box;
    padding: 12px 24px 24px 12px;
  }
}
.child-page {
  margin: 8px 24px 0 24px;
}
.overall-btn {
  .el-switch {
    margin-right: 12px;
  }
  .el-button {
    padding: 0 !important;
    margin: 0 !important;
    width: 64px !important;
    height: 48px !important;
    font-size: 24px !important;
    border-radius: 0;
  }
}
.download-info {
  width: 100%;
  text-align: right;
  font-size: 12px;
  color: #666666;
  cursor: default;
  user-select: none;
  margin: 0;
}
</style>
